<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nextTick</title>
</head>

<body>
    <div id="app">
        <button ref="btnRef" @click="countInc">{{count}}</button>
        <div>ul的高度：{{ulHeight}}</div>
        <button @click="addOne">add</button>
        <ul ref="ulRef">
            <li v-for="item in list" :key="item">
                {{item}}
            </li>
        </ul>
        <div>=============</div>
        <div>全局属性：{{ $myGlobal }}</div>
        <button @click="$myFunc">全局方法</button>
        <button @click="useGlobalPropertyOrFunc">js中使用全局变量或函数</button>
    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        const { createApp, ref, onMounted, nextTick, getCurrentInstance } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const count = ref(10)
                const ulRef = ref(null)
                const list = ref(['apple', 'banana', 'orange'])
                const ulHeight = ref(0)
                const btnRef = ref(null)
                const instance = getCurrentInstance()
                const addOne = async () => {
                    // 添加完成后，更新ul的高度
                    list.value.push('watermelon' + new Date().getTime())
                    // 重新获取ul的高度
                    // 等待下一次 DOM 更新刷新的工具方法。
                    // nextTick(() => {
                    //     ulHeight.value = ulRef.value.clientHeight
                    //     console.log("ulHeight=>", ulRef.value.clientHeight);
                    // })

                    await nextTick()
                    ulHeight.value = ulRef.value.clientHeight

                }
                const countInc = () => {
                    count.value++

                    nextTick(() => {
                        console.log("btnRef=>", btnRef.value.innerText);
                    })

                }
                onMounted(() => {
                    console.log("ulRef=>", ulRef.value);
                    ulHeight.value = ulRef.value.clientHeight
                    console.log("btnRef=>", btnRef.value.innerText);


                })
                const useGlobalPropertyOrFunc = () => {
                    // console.log("全局属性：", $myGlobal);
                    // $myFunc()
                    console.log("instance=>", instance);
                    // console.log("全局属性：", instance.appContext.config.globalProperties.$myGlobal);
                    // instance.appContext.config.globalProperties.$myFunc()
                    console.log("全局方法：", instance.proxy.$myGlobal);
                    instance.proxy.$myFunc()

                }
                return {
                    list,
                    addOne,
                    ulRef,
                    ulHeight,
                    count,
                    btnRef,
                    countInc,
                    useGlobalPropertyOrFunc
                }
            }

        })

        // 一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。
        app.config.globalProperties.$myGlobal = 'Hello Vue 3.0'
        app.config.globalProperties.$myFunc = function () {
            console.log('我是全局函数');

        }

        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>